<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import wsjzglService from '@/api/wsjzgl'
import { useMainStore } from '@/store/main'
import type { FormRules } from 'element-plus'
import plxgDialog from '@/views/gdgl/gdzl/aj/dialogs/plxg-dialog.vue'
import { MlxxGetOutputDTO } from '@/api/wsjzgl-dto'
import { getFldm } from '@/utils/get-fldm'
import { mlxxMainStore } from '@/store/mlxx'

const store = useMainStore()
const mlxxStore = mlxxMainStore()
// 获取ref
const departForm = ref()
const plxgDialogRef = ref()

// 入参
const form = ref<MlxxGetOutputDTO>({
  bz: '',
  dgys: 0,
  mjdm: '',
  mjmc: '',
  mlmc: '',
  mlscrq: '',
  qfys: '',
  wh: '',
  zrz: '',
  zwys: '',
})

const formRules = reactive<FormRules>({
  mlmc: [{ required: true, message: '', trigger: 'blur' }],
  zrz: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  mlscrq: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  mjmc: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  zwys: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  dgys: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
})

const init = () => {
  getMj()
  // 获取表单数据源
  getFormSjy()
}

/*
 * 获取密级（分类代码）
 */
const mjList = ref<any>([])
const getMj = async () => {
  mjList.value = await getFldm('gd006')
}

/*
 * 获取表单数据源
 */
const getFormSjy = () => {
  const params = {
    mlbh: store.$state.nodeTreeData?.bh,
  }
  wsjzglService
    .getQueryMlxx(params)
    .then((res) => {
      form.value = res.data
      mlxxStore.saveMlxxEvent(res.data)
      departForm.value.clearValidate()
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

const mjChange = (index: number) => {
  form.value.mjmc = mjList.value[index].mc
  form.value.mjdm = mjList.value[index].dm
}

defineExpose({ init })
</script>
<template>
  <div class="mlxx-container">
    <div class="content-table">
      <!--      
        :rules="form.depart.rules" -->
      <el-form ref="departForm" :model="form" :rules="formRules" class="demo-ruleForm">
        <table class="form-table">
          <tbody>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                题名
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="mlmc">
                  <el-input v-model="form.mlmc" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">文号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="form.wh" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                责任者
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zrz">
                  <el-input v-model="form.zrz" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                日期
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="mlscrq">
                  <el-input v-model="form.mlscrq" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                密级
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="mjmc">
                  <el-select
                    v-model="form.mjmc"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    @change="mjChange"
                    disabled
                  >
                    <el-option
                      v-for="(zrritem, index) in mjList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="index"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                正文页数
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="zwys">
                  <el-input v-model="form.zwys" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">签发页数</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.qfys" disabled></el-input>
                  <!-- <el-input v-model="form.depart.model.bz" maxlength="500"></el-input> -->
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <!-- <span style="color: red">*</span> -->
                底稿页数
              </td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.dgys" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">备注</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="form.bz" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
    <plxg-dialog ref="plxgDialogRef"></plxg-dialog>
  </div>
</template>
<style lang="scss" scoped>
.mlxx-container {
  width: 100%;
  height: calc(100% - 44px);
  overflow-y: auto;
  .top-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.form-table {
  width: 100%;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    // font-size: $fontsize_default;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
